<template>
  <el-container>

    <el-container>
      <el-aside width="500px" style="height: 645px;">
        <!-- 时间 -->
        <time-weatcher></time-weatcher>

        <!-- 电子公告板 -->
        <el-card class="moduleCard">
          <div slot="header" class="clearfix">
            <span style="font-weight: 1200;color: rgb(0, 102, 255);">电子公告板</span>
          </div>

          <div style="height: 160px;">
            <el-container style="height: 170px;">
              <el-aside width="20px" style="padding-top: 60px;padding-right: 33px;">
                <a v-if="this.pageIndex > 1" @click="last"
                  style="font-size: 24px;font-weight: 1200;text-decoration-line: none;">〈</a>
              </el-aside>

              <el-main style="padding: 0px;">
                <el-table :data="this.dataList" :show-header="false" :rules=none
                  @row-click="editCurrentApplicationApproval">
                  <el-table-column prop="title" showOverflowTooltip="true">
                    <template slot-scope="scope">
                      <div>
                        <span v-if="scope.row.isTop === 1" style="color: rgb(255, 0, 0)">[置顶]</span>
                        {{ scope.row.title }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="time" style="color: rgb(220, 222, 225);" min-width="30px">
                    <template slot-scope="scope">
                      <div style="color: rgb(221, 219, 219)">
                        {{ scope.row.time }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-main>

              <el-aside width="20px" style="padding-top: 60px;">
                <a v-if="this.pageIndex < this.totalPage" @click="next"
                  style="font-size: 24px;font-weight: 1200;text-decoration-line: none">〉</a>
              </el-aside>
            </el-container>
          </div>
        </el-card>

        <!-- 我的申请 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: 1200;color: rgb(0, 102, 255);">我的申请</span>
          </div>

          <div>
            <el-badge :value="numList.sendAsk" class="item" :hidden="!numList.sendAsk">
              <el-button size="small" type="primary" plain disabled>请假申请</el-button>
            </el-badge>
            <el-badge :value="numList.sendPurchase" class="item" :hidden="!numList.sendPurchase">
              <el-button size="small" type="primary" plain disabled>采购申请</el-button>
            </el-badge>
            <el-badge :value="numList.sendAccount" class="item" :hidden="!numList.sendAccount">
              <el-button size="small" type="primary" plain disabled>权限、账号申请</el-button>
            </el-badge>
            <el-badge :value="numList.sendGoods" class="item" :hidden="!numList.sendGoods">
              <el-button size="small" type="primary" plain disabled>物资申请</el-button>
            </el-badge>
            <el-badge :value="numList.sendMaintenance" class="item" :hidden="!numList.sendMaintenance">
              <el-button size="small" type="primary" plain disabled>维修申请</el-button>
            </el-badge>
            <el-badge :value="numList.sendResignation" class="item" :hidden="!numList.sendResignation">
              <el-button size="small" type="primary" plain disabled>离职申请</el-button>
            </el-badge>
          </div>
        </el-card>

        <!-- 我的待办理 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="font-weight: 1200;color: rgb(0, 102, 255);">我的待办理</span>
          </div>

          <div>
            <el-badge :value="numList.receiveAsk" class="item" :hidden="!numList.receiveAsk">
              <el-button size="small" type="primary" plain disabled>请假申请</el-button>
            </el-badge>
            <el-badge :value="numList.receivePurchase" class="item" :hidden="!numList.receivePurchase">
              <el-button size="small" type="primary" plain disabled>采购申请</el-button>
            </el-badge>
            <el-badge :value="numList.receiveAccount" class="item" :hidden="!numList.receiveAccount">
              <el-button size="small" type="primary" plain disabled>权限、账号申请</el-button>
            </el-badge>
            <el-badge :value="numList.receiveGoods" class="item" :hidden="!numList.receiveGoods">
              <el-button size="small" type="primary" plain disabled>物资申请</el-button>
            </el-badge>
            <el-badge :value="numList.receiveMaintenance" class="item" :hidden="!numList.receiveMaintenance">
              <el-button size="small" type="primary" plain disabled>维修申请</el-button>
            </el-badge>
            <el-badge :value="numList.receiveResignation" class="item" :hidden="!numList.receiveResignation">
              <el-button size="small" type="primary" plain disabled>离职申请</el-button>
            </el-badge>
          </div>
        </el-card>
      </el-aside>

      <el-main>
        <pie-chart></pie-chart>
      </el-main>
    </el-container>
    <!-- 弹窗, 详情 -->
    <detail v-if="detailVisible" ref="detail" @refreshDataList="getDataList"></detail>
  </el-container>
</template>

<script>
  import Detail from './module/notice-detail'
  import TimeWeatcher from './module/timeWeatcher'
  import PieChart from './module/pieChart'
  export default {
    data() {
      return {
        dataForm: {
          title: ''
        },
        dataList: [],
        numList: [],
        pageIndex: 1,
        pageSize: 4,
        totalPage: 0,
        detailVisible: false,
        dataListLoading: false
      }
    },
    components: {
      Detail,
      TimeWeatcher,
      PieChart
    },
    activated() {
      this.getDataList()
      this.getNum()
    },
    methods: {
      // 获取通知
      getDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/examineapprove/notice/display'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalPage
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 获取数据列表
      getNum() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/examineapprove/screen/mapNum'),
          method: 'post'
        }).then(({ data }) => {
          this.numList = data
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 通知公告上一页
      next() {
        this.pageIndex++
        this.getDataList()
      },
      // 通知公告下一页
      last() {
        this.pageIndex--
        this.getDataList()
      },
      // 通知公告行点击事件
      editCurrentApplicationApproval(row) {
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.detail.get(row.id)
        })
      }
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  /* 去掉中间数据的分割线 */
  .el-table__row>td {
    border: none;
  }

  /* 去掉上面的线 */
  .el-table th.is-leaf {
    border: none;
  }

  /* 去掉最下面的那一条线 */
  .el-table::before {
    height: 0px;
  }

  /* .el-card__body {
    padding: 0px;
  } */

  .moduleCard {
    width: 480px;
    height: 220px;
    margin-left: 10px;
    margin-top: 10px;
  }

  .moduleCard .el-card__body {
    padding: 0;
  }

  .box-card {
    width: 480px;
    height: 168px;
    margin-left: 10px;
    margin-top: 8px;
  }

  a {
    cursor: pointer;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }

  .item {
    margin-right: 17px;
  }
</style>